<template>
    <div class="text-center">
        <div class="loading" v-show="loadShow" v-loading="loading" element-loading-text="拼命加载中"
             element-loading-background="rgba(0, 0, 0, 0)"></div>
        <div class="middle">
            <img src="@/assets/login/log1.jpg" style="width: 100%;height: 100%;">
        </div>

        <!-- <div class="dlg"> -->
        <el-card class="dlg" shadow="always"
                 :style="{top : offsetH + 200 + 'px', left : (offsetwidth - 240) * 0.5 + 380 + 'px'}" v-show="isShow">
            <div style="font-size: 18px;" class="mt15">欢迎登录政权系统</div>
            <el-input v-model="form.name" class="mt20" style="width: 180px;" size="medium"></el-input>
            <el-input v-model="form.pass" class="mt15" style="width: 180px;" size="medium" type="password"></el-input>
            <el-button type="success" class="mt15" style="width: 180px;" size="medium"
                       @click="gogo"
            >登录
            </el-button>
            <!-- </el-form-item> -->
            <!-- </el-form> -->
        </el-card>
        <!-- </div> -->

    </div>
</template>

<script>

    import {mapActions} from 'vuex'
    import { encryptDes, decryptDes,generatekey } from '@/common/des.js'


    export default {

        name: 'login',

        data() {
            return {
                offsetheight: document.documentElement.clientHeight,
                offsetwidth: document.documentElement.clientWidth,

                offsetH: (document.documentElement.clientHeight - 600) * 0.5,

                form: {
                    name: '',
                    pass: '',
                },
                isShow: true,
                loading: true,
                loadShow: false,
            }
        },

        props: {},

        components: {},

        computed: {},

        methods: {
            ...mapActions([
                'setUserInfo'
            ]),
            async init() {
                this.isShow = false
                this.loadShow = true
                if (this.$route.query.token != undefined) {
                    const res = await this.$http('loginToken', {
                        token: this.$route.query.token
                    });
                    console.log(res);
                    this.$router.push({
                        name: 'communityMap',
                    })
                    this.loadShow = false
                } else {
                    this.isShow = true
                    this.loadShow = false
                }

            },

            async gogo() {

                const Base64 = require('js-base64').Base64;
                const p2 = Base64.encode(this.form.pass);

                const res = await this.$http('login', {
                    username: this.form.name,
                    password: p2,
                })
                //console.log(res,'token');
                localStorage.setItem('key', res.key)
                this.$router.push({
                    name: 'communityMap',
                });
            },
        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>

<style scoped>
    .top {
        position: absolute;
        /*top : 0px;*/
        max-width: 1000px;
        /*left: 100px;*/
    }

    .middle {
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .dlg {
        position: absolute;
        /*top: 120px;*/
        text-align: center;
        /*right: 135px;*/
        z-index: 999;
        width: 240px;
        height: 270px;
    }

    .footer {
        position: absolute;
        left: 0px;
        width: 100%;
        text-align: center;
        line-height: 3em;
        font-size: 12px;
        margin-top: 5px;
        margin-bottom: 10px;
        color: #737373;
    }
    /*.aa{
        width: 100%;
        height: 100%;
    }*/
</style>
